<template>
	<view class="container">
		<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
			<z-paging ref="paging" v-model="commDetailList" @query="getProductPageListByProductId" :fixed='false'
				:style="{ height: productRefHeight }">
				<Evaluation id="main5" :commDetailList="commDetailList" :goodsDetail='{}' :showHeader='false' />
			</z-paging>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const dialog = require("@/utils/dialog.js");
	import GoodsSwiper from "./component/-goods-swiper.vue"; //轮播图组件
	import Evaluation from "./component/-evaluation"; //评价组件
	import popupGoods from "./component/goods-popup/goods"; //购物车商品的模块
	import parser from "@/components/jyf-parser/jyf-parser";

	export default {
		components: {
			GoodsSwiper,
			Evaluation,
			popupGoods,
			"jyf-parser": parser
		},
		data() {
			return {
				productRefHeight: '222px',
				commDetailList: [],
				goodId: ''

			}
		},
		onLoad(options) {
			this.goodId = options.goodId
		},
		onShow() {
			var that = this
			this.$nextTick(function() {
				that.$refs.paging.reload();
			})
		},
		mounted() {
			const {
				windowHeight
			} = uni.getSystemInfoSync();
			this.productRefHeight = windowHeight   + "px";

		},
		methods: {
			// 根据商品ID,查询商品订单评价列表 (分页)(APP)
			getProductPageListByProductId(pageNo, pageSize) {
				var that = this
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCOMMENT_GETPRODUCTPAGELISTBYPRUDUCTBYID;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"productId": this.goodId,
					"userId": app.getUserId()
				};
				this.$network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.commDetailList = res.data.list;
						for (var i = 0; i < that.commDetailList.length; i++) {
							var name = ''
							var NickName = that.commDetailList[i].nickName
							if (NickName.length == 1) {
								name = '*'
							} else {
								for (var j = 0; j < NickName.length - 1; j++) {
									name = name + '*'
								}
								name = name + NickName[NickName.length - 1]
							}
							that.commDetailList[i].nickName = name
						}
						
						that.$refs.paging.complete(that.commDetailList);
					} else {
						dialog.toast(res.message)
					}
				}).catch(err => {
					dialog.toast("获取商品详情错误");
					console.log(err)
				});

			},


		}
	}
</script>

<style>
	/* page{
		background-color: #E5E5E5;
	} */
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	.scroll-page {
		width: 100%;
		height: 100%;
	}

	// 商品详情
	.content-container {
		// background-color: #E5E5E5;

		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: space-between;
		box-sizing: border-box;
	}


	.page-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		background: #fff;
		height: 144rpx;
		width: 100%;
		display: flex;
		border-top: 1rpx solid #f2f2f2;
		box-sizing: border-box;
		padding: 16upx;
		align-items: center;

		>.icon-btn {
			display: flex;
			align-items: center;

			flex: 1;

			>.icon-btn-item {
				flex: 1;
				position: relative;
				text-align: center;
				font-size: 22rpx;
				color: #262626;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;

				>.icon-btn-name {
					margin: 4rpx 0;
				}

				image {
					width: 48upx;
					height: 48upx;
				}
			}
		}

		>.buy-btn {
			flex: 1.5;
			display: flex;
			align-items: center;
			height: 72rpx;
			border: 1px solid #EA5404;

			>.to-buy {
				background: #EA5404;
				color: #fff;
			}

			>.to-store-car {
				color: #EA5404;
			}

			>.to-store-btn {
				flex: 1;
				width: 100%;
				text-align: center;
				line-height: 72rpx;
				font-size: 28rpx;
				padding: 0;
			}
		}
	}

	/deep/.eva-section {
		background: #00000000;
	}
</style>
